.trm-timeline {
    position: relative;
    padding : 0 10px;

    &::before {
        content   : '';
        position  : absolute;
        top       : 20px;
        left      : 10px;
        height    : calc(100% - 20px);
        width     : 4px;
        background: var(--theme-bg-color, #fcfcfe);
    }

    .trm-timeline-item {
        position: relative;

        .trm-timeline-mark-light {
            background   : var(--primary-weak, #afb42b);
            position     : absolute;
            top          : 15px;
            left         : -11px;
            width        : 26px;
            height       : 26px;
            opacity      : 0;
            border-radius: 50%;
            .transition-mixin();
        }

        .trm-timeline-mark {
            position     : absolute;
            top          : 18px;
            left         : -8px;
            width        : 20px;
            height       : 20px;
            border-radius: 50%;
            border       : solid 3px var(--primary, #afb42b);
            background   : var(--theme-bg-color, #fcfcfe);
        }

        &:hover {
            .trm-timeline-mark-light {
                animation: puls 1s infinite;
            }
        }
    }

    .trm-timeline-content {
        border-radius: var(--card-border-radius, 10px);
        position     : relative;
        margin-left  : 45px;
        background   : var(--theme-bg-color, #fcfcfe);
        padding      : var(--card-padding, 40px);
        margin-bottom: var(--card-bottom-card, 40px);
        box-shadow   : var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));

        &:after {
            height                 : 10px;
            width                  : 10px;
            background-color       : var(--theme-bg-color, #fcfcfe);
            transform              : rotate(-135deg);
            content                : '';
            position               : absolute;
            top                    : 23px;
            left                   : -5px;
            border-top-right-radius: 50%;
        }

        .trm-card-header {
            width          : 100%;
            display        : flex;
            align-items    : baseline;
            justify-content: space-between;
            flex-wrap      : wrap;

            .trm-right-side {
                margin-bottom: 15px;

                .trm-date {
                    color        : var(--theme-color, #00283a);
                    margin-left  : auto;
                    background   : var(--theme-bg2-color, #f4f5f7);
                    padding      : 5px 15px;
                    border-radius: 15px;
                    font-size    : 10px;
                }
            }
        }

        .trm-publication {
            >p:last-of-type {
                margin-bottom: 0;
            }
        }

        &.less {
            margin-left: 35px;
            padding    : 20px;
        }
    }
}